import {Component, ComponentProps, VueComponent, Mut, Computed} from "vue3-oop";
import {NForm, NFormItemGi, NGrid, NInputGroup,NInputGroupLabel,NInput,NButton, NSelect, NCheckbox} from "naive-ui";
import BpmnModeler from '../../../BpmnModeler';
import styles from './index.module.scss';

interface IProps {
  bpmnModeler: BpmnModeler,
}
@Component()
export default class StartEventPanel extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    bpmnModeler: {},
  }

  public static tabKey = "StartEventPanel"
  public static tabName = "开始事件"

  @Mut() private state = {
    // 发起人
    initiator: '',
  }

  private setConfigValues = (config:any)=>{
    this.props.bpmnModeler.selectedCell.updateData(config);
  }

  private getConfigValues = ()=>{
    const { selectedCell } = this.props.bpmnModeler;
    this.state.initiator = selectedCell.data?.initiator || '';
  }

  private updateInitiator=(value:string)=>{
    this.state.initiator = value;
    this.setConfigValues({initiator:this.state.initiator});
  }

  render(){
    this.getConfigValues();
    return(
      <NForm labelPlacement="left" labelWidth={100}>
        <NGrid cols={2} xGap={20}>
          <NFormItemGi label="发起人"><NInput value={this.state.initiator} onUpdateValue={this.updateInitiator}/></NFormItemGi>
        </NGrid>
      </NForm>
    )
  }
}